<template>
	<view class="userInfo">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">用户注册</block>
		</cu-custom>			
		<view class="list">
			<form @submit="ReGister" @reset="formReset">
				<view class="line">
					<view>
						<view>
							<text>推荐人ID</text>
							<input type="text" name="referrer" v-model="id.referrer" placeholder="上级用户ID"/>
						</view>
						<view>
							<text>手机号码</text>
							<input type="digit" name="phone" v-model="params.phone" placeholder="请输入手机号码"/>
						</view>
						<view>
							<text>验证码</text>
							<view>
								<input class="code" name="verifycode" type="text" placeholder="手机验证码" v-model="params.verifycode"/>
								<button @click="GetCodes" class="getcode" :disabled="getCode" type="warn" hover-class="none" size="mini">
									{{ time !== 0 ? time + 's' : '获取验证码' }}
								</button>
							</view>
						</view>
						<view>
							<text>性别</text>
							<view>
								<view class="sex">
									<radio-group class="uni-flex" name="gender" @change="params.sex = +$event.detail.value">
										<label>
											<radio :class="['red', {checked: params.sex === 1}]" :checked="params.sex===1?true:false" value="1"></radio>男</label>
										<label>
											<radio :class="['red', {checked: params.sex === 2}]" :checked="params.sex===2?true:false" value="2"></radio>女</label>
									</radio-group>
								</view>
							</view>
						</view>
						<view>
							<text>用户名</text>
							<input type="text" name="userName" v-model="params.name" placeholder="请输入用户名"/>
						</view>
						<view>
							<text>密码</text>
							<input type="password" name="password" v-model="params.password" placeholder="请输入密码"/>
						</view>
						<view>
							<text>确认密码</text>
							<input type="password" name="repwd" v-model="params.repwd" placeholder="请确认密码"/>
						</view>
					</view>
				</view>
				<view class="btn">
					<button type="warn" :loading="loading" formType="submit">提交</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import { sendPhoneMsg, Register } from '@/common/api'
	import graceChecker from '@/common/utils/graceChecker'
	import { mapGetters } from 'vuex'
	export default {
		name: 'register',
		data() {
			return {
				time: 0,
				loading: false,
				getCode: false,
				code: '',
				id: {
					referrer: '',
				},
				params: {
					phone: '',
					verifycode : '',
					name: '',
					password: '',
					repwd: '',
					sex: 1
				}
			}
		},
		computed: {
			...mapGetters([
				'shop'
			])
		},
		methods: {
			isPhone (data, callback) {
				const reg = /^1[0-9]{10,10}$/
				if (reg.test(this.params.phone)) {
					callback(data)
				} else {
					uni.showToast({ title: "请输入正确的手机号", icon: "none" })
				}
			},
			GetCodes () {
				this.isPhone({ phone: this.params.phone, action: 1 }, res => {
					sendPhoneMsg(res).then(res => {
						if (!res.code) {
							this.getCode = true
							this.time = 60
							let timer = setInterval(() => {
								this.time--
								if (!this.time) {
									clearInterval(timer)
									this.time = 0
									this.getCode = false
								}
							}, 1000)
							this.code = res.mcode
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				})
			},
			ReGister (e) {
				const normal = [
					{name:"phone", checkType : "phoneno", errorMsg:"请输入正确的手机号"},
					{name:"verifycode", checkType : "same", checkRule:this.params.verifycode, errorMsg:"请输入验证码"},
					{name:"userName", checkType : "notnull", errorMsg:"请输入用户名"},
					{name:"gender", checkType : "in", checkRule:"0,1",  errorMsg:"请选择性别"},
					{name:"password", checkType : "string", checkRule:"6,6",  errorMsg:"密码最小6位"},
					{name:"repwd", checkType : "same", checkRule:this.params.password,  errorMsg:"确认密码不正确"}
				]
				const isparentId = [
					{name:"referrer", checkType : "notnull", errorMsg:"请输入推荐人ID"}
				]
				let rule = []
				this.shop.is_parent_register ? rule = isparentId.concat(normal) : rule = normal
				const formData = e.detail.value
				const checkRes = graceChecker.check(formData, rule)
				if(checkRes){
					this.loading = true
					Register({...this.params, ...this.id }).then(res => {
						this.loading = false
						if (res.code === 'ok') {
							uni.showModal({
								title:"",
								content: res.msg,
								showCancel: false,
								success(res) {
									if (res.confirm) {
										uni.redirectTo({
											url: '/pages/login/index'
										})
									}
								}
							})
						} else {
							uni.showToast({ title: res.msg, icon: "none" });
						}
					})
				}else{
					uni.showToast({ title: graceChecker.error, icon: "none" })
				}
			}
		}
	}
</script>

<style lang="less" scoped>
.userInfo {
	overflow: hidden;
	.list {
		.line {
			& > view {
				padding: 0 15px;
				background-color:white;
				& > view {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20upx 0;
					position: relative;
					&:last-of-type {
						&::after {
							display: none;
						}
					}
					&::after {
						position: absolute;
						content: '';
						border-bottom: 1px solid #f3f3f3;
						left: 0;
						bottom: 0;
						width: 100%;
					}
					& > text { font-size: 26upx;width: 120upx;text-align: justify;text-align-last:justify;padding-right: 30upx; }
					& > view, & > navigator { flex: 1;padding: 5upx 0; font-size: 26upx; color:#999;}
					& > input { font-size: 26upx;flex: 1;}
					& > view { 
						flex: 1;
						font-size: 26upx;
						color:#999;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.code {width: 200upx}
						& > .sex {
							label {
								margin-right: 20upx;
								radio {
									margin-right: 10upx
								}								
							}
						}
						& > button { margin-right: 0;min-width:110px; }
					}
				}
			}
		}		
	}
	.btn {
		margin: 60upx 15px 0;
	}
}

</style>
